<template>
  <div class="box">
    <el-divider content-position="left">就诊人详细</el-divider>
    <div class="form">
      <el-form label-width="120px" ref="form1" :model="patientParmas" :rules="rules1" >
        <el-form-item label="用户姓名" prop="name" >
          <el-input
            placeholder="请输入用户名"
            v-model="patientParmas.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="idType" >
          <el-select
            placeholder="请选择证件类型"
            v-model="patientParmas.idType"
          >
            <el-option label="身份证" :value="1"></el-option>
            <el-option label="户口本" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="idNo" >
          <el-input
            placeholder="请输入证件号码"
            v-model="patientParmas.idNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="sex" >
          <el-radio-group v-model="patientParmas.sex">
            <el-radio :value="1">男</el-radio>
            <el-radio :value="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday" >
          <el-date-picker
            v-model="patientParmas.birthday"
            type="date"
            placeholder="请选择出生日期"
            :disabled-date="disabledDate"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-divider content-position="left"
      >建档信息（完善部分后医院首次就诊不排队建档）</el-divider
    >
    <div class="form">
      <el-form label-width="120px" ref="form2" :model="patientParmas" :rules="rules2" >
        <el-form-item label="婚姻状况" prop="maritalStatus" >
          <el-radio-group v-model="patientParmas.maritalStatus">
            <el-radio :value="1">未婚</el-radio>
            <el-radio :value="2">已婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保" prop="insuType" >
          <el-radio-group v-model="patientParmas.insuType">
            <el-radio :value="1">医保</el-radio>
            <el-radio :value="2">自费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址" prop="currentAddress" >
          <el-cascader v-model="patientParmas.currentAddress" :props="props" />
        </el-form-item>
        <el-form-item label="详细地址" v-model="patientParmas.detailAddress" prop="detailAddress" >
          <el-input placeholder="请输入详细地址" v-model="patientParmas.detailAddress" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-divider content-position="left">紧急联系人信息</el-divider>
    <div class="form">
      <el-form label-width="120px" ref="form3" :model="patientParmas" :rules="rules3" >
        <el-form-item label="用户姓名" prop="emergencyContactName" >
          <el-input
            placeholder="请输入用户名"
            v-model="patientParmas.emergencyContactName"
          ></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="emergencyContactIdType" >
          <el-select
            placeholder="请选择证件类型"
            v-model="patientParmas.emergencyContactIdType"
          >
            <el-option label="身份证" :value="1"></el-option>
            <el-option label="户口本" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="emergencyContactIdNo" >
          <el-input
            placeholder="请输入证件号码"
            v-model="patientParmas.emergencyContactIdNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="emergencyContactPhone" >
          <el-input
            placeholder="请输入手机号码"
            v-model="patientParmas.emergencyContactPhone"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="resetForm" >重写</el-button>
          <el-button type="primary" @click="submitForm" >提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted  } from "vue";
import { getAddressAPI  } from '@/api/address'
import { addPatientAPI , getPatientDetailAPI , updataPatientAPI } from '@/api/patient'
import { ElMessage } from "element-plus";
import { useRoute , useRouter } from 'vue-router'
import useConfigStore from "@/stores/moudels/configStore";
const Props = defineProps(['getPatient'])
let ConfigStore = useConfigStore();
let route = useRoute()
let router = useRouter()
let form1 = ref(null);
let form2 = ref(null);
let form3 = ref(null);
onMounted(()=>{
  form1.value.resetFields();
  form2.value.resetFields();
  form3.value.resetFields();
  getPatientInfo()
})

let patientParmas = reactive({
  name: "",
  idType: '',
  idNo: "",
  sex: 1,
  birthday: "",
  maritalStatus: 1,
  insuType: 1,
  currentAddress: [],
  detailAddress: "",
  emergencyContactName: "",
  emergencyContactPhone: "",
  emergencyContactIdType: 1,
  emergencyContactIdNo: "",
});
let rules1 = reactive({
  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  idType: [{ required: true, message: "请选择证件类型", trigger: "change" },],
  idNo: [{ required: true, message: "请输入证件号码", trigger: "blur" },
            { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: "请输入正确的证件号码", trigger: "blur" }
],
  sex: [{ required: true, message: "请选择性别", trigger: "change" }],
  birthday: [{ required: true, message: "请选择出生日期", trigger: "change" }]
})
let rules2 = reactive({
  maritalStatus: [{ required: true, message: "请选择婚姻状况", trigger: "change" }],
  insuType: [{ required: true, message: "请选择自费/医保", trigger: "change" }],
  currentAddress: [{ required: true, message: "请选择当前住址", trigger: "change" }],
  detailAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }]
})
let rules3 = reactive({
  emergencyContactName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  emergencyContactIdType: [{ required: true, message: "请选择证件类型", trigger: "change" }],
  emergencyContactIdNo: [{ required: true, message: "请输入证件号码", trigger: "blur" },
            { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: "请输入正确的证件号码", trigger: "blur" }
],
  emergencyContactPhone: [{ required: true, message: "请输入手机号码", trigger: "blur" },
            { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
]
})
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
//获取就诊人信息
const getPatientInfo = async ()=>{
  let id = ConfigStore.patientId
  if(id) {
    let result = await getPatientDetailAPI(id)
    Object.assign(patientParmas,result.data)
  }
}
//级联选择器获取地址
const props = {
    lazy:true,
    async lazyLoad(node, resolve) {  
    const result = await getAddressAPI(node.data?.id || '4744');  
    const leavesPromises = result.data.map(async (item) => {  
        const leafData = await getAddressAPI(item.id);  
        return { id: item.id, value: item.name, label: item.name, leaf: leafData.data.length === 0 };  
    });  
      
    const showData = await Promise.all(leavesPromises);  
    resolve(showData);  
}
  }
//提交按钮的回调
const submitForm = async ()=>{
  await Promise.all([
    form1.value.validate(),
    form2.value.validate(),
    form3.value.validate()
  ])
  //提交表单
 if(patientParmas._id) {
  await updataPatientAPI(patientParmas)

 }else {
 await addPatientAPI(patientParmas)

 }
  ElMessage.success(patientParmas._id?'修改成功':'添加成功')
  ConfigStore.changePatientShow(1)
  patientParmas._id = ''
  Props.getPatient()
  if(route.query.isBack) {
    router.push({
      path:route.query.isBack,
      query:{
        id:route.query?.pId
      }
    })
  }
}
//重置表单
const resetForm = ()=>{
  form1.value.resetFields();
  form2.value.resetFields();
  form3.value.resetFields();
}
</script>

<style lang="scss" scoped>
.box {
  .form {
    width: 60%;
    margin-left: 145px;
  }
}
</style>
